<template>
  <div class="dragarea-top-left-title flex100" :style="getStyle('root')">
    <div class="backbtn">
      <img :src="logo || require('../../assets/logo.png')" width="30" height="30" style="margin-top: -2px;vertical-align:middle;"/>
    </div>
    <div class="title-content">
      <div class="readonlytitle" v-show="!isEditTitle" :title="pageTitle">
        <div>{{pageTitle || "请输入页面标题"}}</div>
        <a-tooltip>
          <template #title>
            <span>点击修改页面标题</span>
          </template>
          <EditOutlined class="flex-vh-center" style="margin-left: 10px" @click="showEditInput()" />
        </a-tooltip>
      </div>
      <a-input
        @change="pageTitleChange"
        class="inputtitle"
        ref="inputtitle"
        v-show="isEditTitle"
        placeholder="请输入页面标题"
        v-model:value="pageTitle"
        @blur="isEditTitle = !isEditTitle"
      >
        <template #suffix>
          <a-tooltip  title="该标题将作用于浏览器的页面标题">
            <ExclamationCircleOutlined />
          </a-tooltip>
        </template>
      </a-input>
    </div>
    <div class="version-dropdown">
      <a-dropdown overlayClassName="idm_dev_theme">
        <span class="ant-dropdown-link">
          v{{props.version||versionList[0].version}}
          <DownOutlined />
        </span>
        <template #overlay>
          <a-menu style="max-height: 500px;overflow: auto">
            <a-menu-item
              v-for="(item, index) in versionList"
              :key="index"
              @click="changeVersion(item)">
              <a href="javascript:;">
                v{{item.version}}{{
                  item.version == version
                  ? "（当前）"
                  : index == 0
                  ? "（最新）"
                  : ""
                }}
              </a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <div class="updatebtn" v-show="versionList && versionList.length>0 &&versionList[0].version != props.version">
      <a-button type="link" @click="changeVersion(versionList[0])">
        <SyncOutlined />
        更新版本
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref, Ref, defineProps, onMounted, nextTick } from 'vue'
import { EditOutlined, ExclamationCircleOutlined, DownOutlined, SyncOutlined } from '@ant-design/icons-vue'
const props = defineProps({
  height: String,
  pageId: String,
  title: {
    type: String,
    required: true
  },
  version: String,
  changeHandle: {
    type: Function,
    required: true
  }
})
const logo = computed(() => {
  return (window as any).HJP?.setting.develop.logoImgSrc
})
const isEditTitle: Ref<boolean> = ref(false)
const pageTitle: Ref<string> = ref("")
const inputtitle = ref<HTMLDivElement | null>(null)
const versionList = reactive([
  {
    version: "1.0.0",
    author: "作者",
    remark: "版本备注",
    datetime: "2024-03-28"
  }
])

/**
 * @Desc 打开标题编辑输入框
 */
const showEditInput = () => {
  isEditTitle.value = !isEditTitle.value
  nextTick(() => {
    inputtitle.value?.focus()
  })
}

function refreshOutData(item?: undefined) {
  const currentVersion = versionList.filter(item => item.version === props.version)
  props.changeHandle({
    title: pageTitle.value,
    version: item || (currentVersion.length > 0 ? currentVersion[0] : versionList[0])
  })
}

const pageTitleChange = () => {
  refreshOutData()
}

const changeVersion = (item: any) => {
  refreshOutData(item)
}

const getStyle = (key: string) => {
  const styles:any = {}
  switch (key) {
    case 'root':
      styles.height = props.height + 'px';
      styles['line-height'] = props.height + 'px'
      break
    default:
      break
  }
  return styles
}

onMounted(() => {
  pageTitle.value = props.title
})

</script>

<style lang="scss" scoped>
.dragarea-top-left-title{
  > div.backbtn{
    cursor: pointer;
    width: 60px;
    text-align: center;
  }
  .version-dropdown{
    margin-left: 15px;
  }
  .updatebtn button {
    font-size: 12px;
  }
  .title-content{
    .readonlytitle{
      display: flex;
      div{
        display: inline-block;
        max-width: 170px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
</style>
